<template>
    <div>
        <el-descriptions v-if="!propJson.editFlag" :title="title" :info="getInfo" :column="propJson.column" :border="propJson.border"
            :direction="propJson.direction" :size="propJson.size" :label-width="propJson.labelWidth">
            <el-descriptions-item v-for="itemInfo in propJson.list" :key="itemInfo.id" :label="itemInfo.label"
                :span="itemInfo.span" :rowspan="itemInfo.rowspan" :align="itemInfo.align" :label-align="itemInfo.labelAlign">
                <component :is="itemInfo.component" :propJson="itemInfo.propJson" :commonParam="commonParam" :style="propJson.border ? 'width: 100%' : 'display: inline-block'">
                    <template v-slot:[itemSlot.slotName]="slotProps" v-for="itemSlot in slotList">
                        <slot :name="itemSlot.slotName" :slotProps="slotProps"></slot>
                    </template>
                </component>
            </el-descriptions-item>
        </el-descriptions>

        <div v-if="propJson.editFlag" style="text-align: center;">
            <span style="font-size: 13px; color: #606266">设计态按表单展示，运行态渲染描述列表</span>
        </div>
        <br v-if="propJson.editFlag"/>

        <el-form>
            <draggable v-if="propJson.editFlag"
                       :list="propJson.list"
                       animation="300"
                       :force-fallback="true"
                       :group="{name:'lowcode'}"
                       item-key="id"
            >
                <template #item="{ element }">
                    <el-form-item class="itemClass" :label="element.label">
                        <component :is="element.component" :propJson="element.propJson" v-if="itemFlag" :commonParam="commonParam" @click.stop="" @dblclick.stop="changeComponentInfo(element)" style="width: 100%"/>
                        <component is="CloseCircleOutlined" class="closeClass" @click.stop="" @dblclick.stop="deleteComponent(element)"/>
                    </el-form-item>
                </template>
            </draggable>
        </el-form>

    </div>
</template>

<script setup name="DescriptionsComponent" lang="ts">
import {computed, defineProps, ref} from "vue";
import {doThirdServiceValue} from "@/utils/lowcode/thirdService";
import {useLowCodeStore} from "@/stores/lowcode/lowcode";
import {deepCopy} from "@/utils/ywuCommon";
import {getCommonParamObj} from "@/utils/commonParamUtil";

let props = defineProps(['propJson', 'commonParam']);

let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

let title = ref("")

let itemFlag = ref(true);

let slotList = computed(() => {
    let res = getCommonParamObj(commonParam.value, "templateSlotInfo")
    return res.variableValue;
})

let getInfo = computed(() => {
    getInfoFunc();
})

function changeComponentInfo(element) {
    let lowCodeStore = useLowCodeStore();
    lowCodeStore.resetCurrentDrawer(element.drawerComponent)
    lowCodeStore.resetCurrentDrawerElementId(element.id);
    lowCodeStore.resetCurrentDrawerTitle(element.title)
    let copyJson = deepCopy(element.propJson)
    lowCodeStore.resetLowCodeDrawerJsonInfo(copyJson);
    lowCodeStore.resetIsShowDrawer(true)
    lowCodeStore.resetLowCodeComponentList(propJson.value.list)
}

function deleteComponent(element) {
    let index = -1;
    // 遍历当前列表，删除元素ID对应的数据
    for (let i = 0; i < propJson.value.list.length; i++) {
        if (propJson.value.list[i].id === element.id) {
            index = i;
        }
    }
    if (index >= 0) {
        propJson.value.list.splice(index, 1);
    }
}

function execThen(resValue) {
    title.value = resValue
}

async function getInfoFunc() {
    await doThirdServiceValue(propJson.value.titleInfo, commonParam.value, execThen, () => {}, null)
}

</script>

<style scoped lang="less">
.itemClass {
    position: relative;
    transition: box-shadow 0.3s ease;
    margin-bottom: 0.3%;
    .closeClass {
        display: none;
    }
}

.itemClass:hover {
    cursor: pointer;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
    .closeClass {
        position: absolute;
        color: #e76565;
        top: 2px;
        right: 2px;
        display: block;
    }
}
</style>